<template>
<!-- 修改群聊名称 -->
  <div class="name-container">
    <!-- <div class="backbar">
      <div class="back" v-hammer:tap="(ev) => $router.push({name: 'GroupSetting'})">
        <i class="fa fa-angle-left fa-lgl"></i>
        <span>返回</span>
      </div>
    </div> -->
    <div class="actionbar flex-center">
      <div class="cancel" @click="onCancel">
        <div>取消</div>
      </div>
      <div class="title">
        <div>修改群名称</div>
      </div>
      <div class="confirm" @click="onConfirm">
        <div class="confirm-button" :class="{'disabled': groupNick.length === 0}">完成</div>
      </div>
    </div>

    <div class="input-box">
      <div class="input-title">
        群聊名称
      </div>
      <div class="input-wrapper">
        <input type="text" v-model="groupNick" ref="groupNickInput"/>
      </div>
    </div>
  </div>
</template>

<script lang="ts">
import { Component, Vue } from "vue-property-decorator";
import { Action, namespace } from 'vuex-class';
import { Webim } from '@/utils/types';
import { MsgTypeKV } from '@/api/socket/imClient';
import MessageMixin from '@/mixins';
declare const $Vue: Vue;
declare const webim: Webim;
const chatModule = namespace('chatModule');
const userModule = namespace('userModule');

@Component<GroupName>({
  mixins: [MessageMixin],
})
export default class GroupName extends Vue {
  @chatModule.State("groupSetting") groupSetting: any;
  @chatModule.State("currentGroup") currentGroup: any;
    @chatModule.Action("saveGroupSettingFN") saveGroupSettingFN: any;
  private groupNick: string = '';
  private eventList: Array<string> = [
    "$getGroupInfoByGroupId",
    "$updateGroupSetting",
  ];
  protected mounted() {
    this.initEvents(this.eventList);
    this.groupNick = this.groupSetting.info.groupNick;

    setTimeout(() => {
      let input: any = this.$refs.groupNickInput;
      if (input) {
        input.focus()
      }
    }, 1000);
  }

  private onCancel() {
    this.$router.go(-1);
  }

  private onConfirm() {
    if (this.groupNick.length === 0) {
      return this.$createToast({
        txt: '群名称不能为空!',
        type: "warn",
        time: 3000,
      }).show();
    }
    let info = Object.assign({}, this.groupSetting.info);
    info.groupNick = this.groupNick
    this.sendMessage(MsgTypeKV.updateGroupSetting, {
      info,
      groupNick: this.groupNick
    });
  }

    /**
   * 更新群设置
   */
  private $updateGroupSetting(data: any) {
    if (data.result === 0) {
      this.$createToast({
        txt: data.message,
        type: "correct",
        time: 3000
      }).show();
      // 更新群设置
      this.sendMessage(MsgTypeKV.getGroupInfoByGroupId, {
        groupId: sessionStorage.getItem("groupId")
      });
    } else {
      this.$createToast({
        txt: data.message,
        type: "warn",
        time: 3000
      }).show();
    }
  }

  /**
   * 根据群号搜索群设置信息
   */
  private $getGroupInfoByGroupId(data: any) {
    if (data.result === 0) {
      // 是否置顶
      this.saveGroupSettingFN(data);
      this.$router.go(-1)
    } else {
      this.$createToast({
        txt: data.message,
        type: "warn",
        time: 3000
      }).show();
    }
  }

}
</script>

<style lang="stylus" scoped>
.name-container
  width 100%
  height 100%
  overflow-x hidden
  overflow-y auto
  background #f4f4f4
.actionbar
  width 100%
  height 44px
  // border-bottom 1px solid #cdcdcd
  .title
    font-weight bold
    flex-basis 64%
  .cancel, .confirm
    flex-basis 16%
  .confirm-button
    width 90%
    height 28px
    line-height 28px
    background #27bf64
    color white
    border-radius 4px
    &.disabled
      background #86d2a4
      color #a9a5a5
  
.input-title
  font-size 13px
  color #909090
  padding 2px 6px
  text-align left
.input-wrapper
  height 44px
  width 100%
  text-align left
  background white
  input 
    width 100%
    height 100%
    border none
    padding 2px 4px
    box-sizing border-box
    background white
</style>

